<template>
	<view class="app-tabbar" :style="{'backgroundColor':backgroundColor}">
		<view class="app-tabbar-border"></view>

			<view v-for="(item,index) in tabList" :key="index" class="app-tabbar__item" :class="currentTabIndex == index ? 'on' : ''" @tap="switchTab(index)">
				<view class="app-tabbar__bd">
					<view class="app-tabbar__icon">
						<image :src="(currentTabIndex == index) ? item.selectedIconPath : item.iconPath"></image>
					</view>
					<view class="app-tabbar__label" :style="[currentTabIndex == index ? {'color': tintColor} : {'color': color}]">{{item.text}}</view>
				</view>
			</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [
					{
						pagePath: "/personal/src/pages/home/index?id=1",
						iconPath: "/static/nav/dp1.png",
						selectedIconPath: "/static/nav/dp.png",
						text: "店铺"
					},
					{
						pagePath: "/personal/src/pages/popularize/index?id=1",
						iconPath: "/static/nav/ld1.png",
						selectedIconPath: "/static/nav/ld2.png",
						text: "信息"
					},
					{
						pagePath: "/personal/src/pages/earnings/index?id=1",
						iconPath: "/static/nav/sy1.png",
						selectedIconPath: "/static/nav/sy.png",
						text: "收益"
					},
				
					{
						pagePath: "/personal/src/pages/my/index?id=1",
						iconPath: "/static/nav/my1.png",
						selectedIconPath: "/static/nav/my.png",
						text: "我的"
					}
				],
				currentTabIndex: this.current
			}
		},
		props: {
			current: { type: [Number, String], default: 0 },
			backgroundColor: { type: String, default: '#fbfbfb' },
			color: { type: String, default: '#999' },
			tintColor: { type: String, default: '#42b983' }
		},
		methods: {
			switchTab(index){
				this.currentTabIndex = index
				//this.$emit('click', index)//自定义到前端
				console.log(this.tabList[index].pagePath);
				uni.redirectTo({
				    url: this.tabList[index].pagePath
				});
			}
		},
	}
</script>

<style>
	.app-tabbar {
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 998;
		background: #FFFFFF;
		padding-bottom: env(safe-area-inset-bottom);
		flex-direction: row;
		display: flex;
	}
	
	.app-tabbar-border {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 1px;
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: rgba(0, 0, 0, 0.33);
	}
	
	.app-tabbar__item {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		font-size: 0;
		text-align: center;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
	}
	
	.app-tabbar__bd {
		position: relative;
		height: 100rpx;
		-webkit-flex-direction: column;
		flex-direction: column;
	}
	.app-tabbar__icon {
		position: relative;
		display: inline-block;
		margin-top: 10rpx;
		width: 48rpx;
		height: 48rpx;
	}
	
	.app-tabbar__icon image {
		width: 100%;
		height: 100%;
	}
	
	.app-tabbar__label {
		position: relative;
		text-align: center;
		font-size: 20rpx;
		line-height: 1.8;
	}
</style>
